<template>
  <!-- <div> -->
  <div class="BarwEcharts4" v-loading="loading">
    <div id="Bar4"></div>
  </div>
  <!-- </div> -->
</template>

<script setup lang="ts">
import { getGradeCount } from "@/request/comment";
const echart = inject("echart");
let myChart = null;
let page = ref(1);
const loading = ref(true);
const props = defineProps({
  width: {
    type: String,
    default: "100%"
  },
  height: {
    type: String,
    default: "300px"
  },
  city_list: {
    type: String,
    default: ""
  }
});

onMounted(() => {
  // initEcharts();
  // getData();
  // console.log(props.city_id_list);
});
onUnmounted(() => {
  if (myChart.isDisposed) {
    myChart.clear();
    myChart.dispose();
    myChart = null;
  }
});

const getData = async item => {
  await getGradeCount({
    // page:page.value,
    // list_id: 272
    list_id: item
  }).then(({ data }) => {
    console.log("data",data);

    // result.name = data[0].bad_reviews;
    // result.value = data[0].sum;
    renderEcharts(data);
  });
};
const initEcharts = () => {
  myChart = echart.init(document.getElementById("Bar4"));
};
const renderEcharts = (result: any) => {
  loading.value = false;
  var sourceBar = {
    itemData: ["1-2", "2-3", "3-4", "4-5"],
    seriesData: [980, 302, 150, 57, 231]
  };
  if (result.length > 0) {
    // console.log("大于0");
    // console.log("result=======", result);
    sourceBar.itemData = result.map(v => v.GRADE_LEVEL);
    sourceBar.seriesData = result.map(v => v.GRADE_COUNT);
  }
  var itemData = sourceBar.itemData;
  var seriesData = sourceBar.seriesData;
  var tooltip = sourceBar.tooltip;
  // var backgroundList = ['#0068b7', '#8c97cb', '#aa89bd', '#f6b37f', '#e27e34'];
  var color = [
    "#00b9f6",
    "#38a97d",
    "#004eff",
    "#17c7e7",
    "#4e85ea",
    "#e49be9",
    "#078d9d",
    "#eca52a",
    "#ef9544",
    "#ea3b3b"
  ];

  var data = {};
  for (var k in itemData) {
    data[itemData[k]] = seriesData[k];
  }

  var xAxisData = [];
  var dataArr = [];
  for (var i in data) {
    xAxisData.push(i);
    dataArr.push(data[i]);
  }
  myChart.setOption({
    title: {
      text: "等级评论人数比例",
      textStyle: {
        align: "center",
        color: "#FA0326",
        fontSize: 20
      },
      top: "5%",
      left: "center"
    },
    backgroundColor: "#040042",
    grid: {
      top: "25%",
      left: "5%",
      right: "10%",
      bottom: "8%",
      containLabel: true
    },
    tooltip: {
      show: "true",
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        shadowStyle: {
          color: "rgba(112,112,112,0)"
        }
      },
      formatter: function(params) {
        var unit = params[0].name.substring(
          params[0].name.indexOf("(") + 1,
          params[0].name.indexOf(")")
        );
        return params[0].name + "：" + params[0].value + "条数据";
      },
      backgroundColor: "rgba(0,0,0,0.7)", // 背景
      padding: [8, 10], //内边距
      extraCssText: "box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);" //添加阴影
    },
    xAxis: [
      {
        show: true,
        name: "来源",
        nameTextStyle: {
          fontSize: 14,
          fontFamily: "Microsoft YaHei",
          color: "#fff"
        },
        type: "category",
        nameLocation: "end",
        nameGap: 8,
        axisLabel: {
          fontSize: 16,
          fontFamily: "Microsoft YaHei",
          color: "#fff",
          interval: 0,
          margin: 16,
          formatter: function(params) {
            if (params.length > 6) {
              params = params.substr(0, 6) + "...";
            } else {
              params = params;
            }
            return params;
          }
        },
        axisLine: {
          show: true,
          symbol: ["none", "arrow"],
          lineStyle: {
            color: "#05edfc"
          }
        },
        data: xAxisData
      },
      {
        type: "category",
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        splitArea: {
          show: false
        },
        splitLine: {
          show: false
        },
        data: xAxisData
      },
      {
        type: "category",
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        splitArea: {
          show: false
        },
        splitLine: {
          show: false
        },
        data: xAxisData
      }
    ],
    yAxis: {
      type: "value",
      name: "数量",
      nameTextStyle: {
        fontSize: 14,
        fontFamily: "Microsoft YaHei",
        color: "#fff"
      },
      minInterval: 1,
      nameLocation: "end",
      nameGap: 10,
      splitLine: {
        show: false
      },
      axisLabel: {
        show: true,
        fontSize: 12,
        fontFamily: "Arial",
        color: "#fff"
      },
      axisLine: {
        show: true,
        symbol: ["none", "arrow"],
        lineStyle: {
          color: "#05edfc"
        }
      }
    },
    series: [
      {
        type: "bar",
        stack: 1,
        xAxisIndex: 0,
        barWidth: 10,
        barGap: 5,
        z: 2,
        data: (function() {
          var itemArr = [];
          for (var i = 1; i < dataArr.length + 1; i++) {
            var item = {
              value: dataArr[i - 1],
              itemStyle: {
                normal: {
                  barBorderRadius: 50,
                  color: new echart.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: color[translateColor(i) * 2 - 2]
                    },
                    {
                      offset: 1,
                      color: color[translateColor(i) * 2 - 1]
                    }
                  ])
                }
              }
            };
            itemArr.push(item);
          }
          return itemArr;
        })()
      },
      {
        type: "scatter",
        stack: 1,
        symbolOffset: [0, 0], //相对于原本位置的偏移量
        label: {
          normal: {
            show: false
          }
        },
        xAxisIndex: 2,
        symbolSize: 10,
        z: 2,
        data: (function() {
          var itemArr = [];
          for (var i = 1; i < dataArr.length + 1; i++) {
            var item = {
              value: 0,
              itemStyle: {
                normal: {
                  borderColor: "#fff",
                  borderWidth: 2,
                  color: new echart.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: color[translateColor(i) * 2 - 2]
                    },
                    {
                      offset: 1,
                      color: color[translateColor(i) * 2 - 1]
                    }
                  ])
                }
              }
            };
            itemArr.push(item);
          }
          return itemArr;
        })()
      },
      {
        type: "bar",
        xAxisIndex: 1,
        barGap: "140%",
        data: dataArr,
        barWidth: 22,
        itemStyle: {
          normal: {
            barBorderRadius: 50,
            color: "#0e2147"
          }
        },
        z: 1
      },
      {
        type: "bar",
        xAxisIndex: 2,
        barWidth: 30,
        barGap: 1,
        z: 0,
        data: (function() {
          var itemArr = [];
          for (var i = 1; i < dataArr.length + 1; i++) {
            var item = {
              value: dataArr[i - 1],
              itemStyle: {
                normal: {
                  barBorderRadius: 50,
                  color: new echart.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: color[translateColor(i) * 2 - 2]
                    },
                    {
                      offset: 1,
                      color: color[translateColor(i) * 2 - 1]
                    }
                  ])
                }
              }
            };
            itemArr.push(item);
          }
          return itemArr;
        })()
      },
      {
        type: "scatter",
        hoverAnimation: false,
        xAxisIndex: 2,
        symbolOffset: [0, 0], //相对于原本位置的偏移量
        symbolSize: 30,
        z: 2,
        data: (function() {
          var itemArr = [];
          for (var i = 1; i < dataArr.length + 1; i++) {
            var item = {
              value: 0,
              itemStyle: {
                normal: {
                  color: new echart.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: color[translateColor(i) * 2 - 2]
                    },
                    {
                      offset: 1,
                      color: color[translateColor(i) * 2 - 1]
                    }
                  ])
                }
              }
            };
            itemArr.push(item);
          }
          return itemArr;
        })()
      }
    ]
  });
};

watch(
  () => props.city_list,
  (newValue, oldValue) => {
    if (newValue) {
      console.log(newValue);

      initEcharts();
      getData(newValue);
    }
  }
);
function translateColor(index) {
  if (index > 5) {
    return translateColor(index - 5);
  }
  return index;
}
window.addEventListener("resize", () => {
  //监听浏览器大小去改变图表尺寸
  myChart.resize();
});
</script>

<style scoped>
.BarwEcharts4 {
  height: 100%;
  width: 100%;
  /* height: 500px; */
  /* background-color: aliceblue; */
}

#Bar4 {
  height: 100%;
  width: 100%;
  /* background-color: aliceblue; */
}
</style>